<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Bad Piggies</title>
  <meta name="keywords" content="Bad Piggies, CSS, CSS 3, CSS3, frontend" />
  <meta name="description" content="Draw a BadPiggy with CSS only." />
  <meta name="Eddie" content="eddielau42@163.com"/>
  <link type="text/css" rel="stylesheet" href="./badpigy.css" media="screen"/>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>

<body>

  <div class="main">

    <div class="switcher unvisible hidden">
      <div class="inner"></div>
    </div>

    <div class="piggy">
      <!-- part: ears -->
      <div class="ears">
        <div class="ear left">
          <div class="hole"></div>
        </div>
        <div class="ear right">
          <div class="hole"></div>
        </div>
      </div>

      <!-- part: eyes -->
      <div class="eyes">
        <div class="eyebrows"></div>
        <div class="eyeball left"></div>
        <div class="eyeball right"></div>
      </div>

      <!-- part: nose -->
      <div class="nose"></div>

      <!-- part: mouth -->
      <div class="mouth">
        <div class="teeth"></div>
      </div>

      <!-- part: freckles -->
      <div class="freckles left"></div>
      <div class="freckles right"></div>
    </div>

    <div class="oink">
      <!-- TODO -->
    </div>
  </div>

  <script src="./index.js"></script>
</body>
</html>